<?php defined('In33hao') or exit('Access Invalid!');?>
<link
	href="<?php echo RESOURCE_SITE_URL;?>/js/jcarousel/skins/tango/skin.css"
	rel="stylesheet" type="text/css">
<style type="text/css">
.jcarousel-skin-tango {
	 width: 95%;
	 margin: 0 auto;
	margin-top: 10px;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal {
	width: 100% !important;
	height: 60px !important;
}

.jcarousel-skin-tango .jcarousel-item {
	width: 96px !important;
	height: 96px !important;
}

.jcarousel-skin-tango .jcarousel-container-horizontal {
	width: 424px !important;
}
.jcarousel-skin-tango li { display: inline-block;}
	.select—box { width: 90%; margin: 5px auto;}
    .select—box p { display: inline-block; width: 70px; height: 30px;line-height: 30px;}
	.select_name { vertical-align: middle; display: inline-block; width: 80px; position: relative; margin-right: 10px; color: #fff; text-align: center; line-height: 30px; height: 30px; background: #ff7674;}
    .select_name ul { display: none; position: absolute; left: 0; top: 30px; background: #ff7674; z-index: 999;}
     .select_name ul li { width: 80px; height: 30px; line-height: 30px;}
.select_name ul li:hover { background: #ff6666;
	cursor: pointer;}
	.select_name span b { width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 5px solid #fff; position: absolute; right: 5px; top: 13px; transition: all 0.5s; }
.select_name:hover ul { display: block;}
.select_name:hover span b { transform:rotate(180deg)}
.refish { width: 90%; height: 40px; margin: 10px auto 0 auto;}
.refish b { display: inline-block; vertical-align: middle; width: 20px; height: 20px; margin-right: 10px; background: url("/shop/templates/default/images/refires.png")}
	#sou { display: inline-block; vertical-align: middle; width: 50px; text-align: center; line-height: 30px; color: #fff; height: 30px; background: #00BFFF;}
</style>
<div class="choose-goods">
	<ul class="tabs-nav">
		<li class="tabs-selected"><a href="javascript:void(0);">商品列表</a></li>
	</ul>

	<div class="select—box">
		 <p>选择分类</p>
		 <div class="select_name">
			  <span>选择分类 <b></b></span>
			  <ul>
				  <?php foreach($output['gc_class'] as $gc) { ?>
				      <li onclick="getClass(this,<?php echo $gc['gc_id'] ?>,1)"><?php echo $gc['gc_name'] ?></li>
				  <?php } ?>
			  </ul>
		 </div>
		 <input type="hidden" class="gc_hidden" name="gc_id">
		 <input type="hidden" class="gc_hidden" name="gc_id2" >
		 <input type="hidden" class="gc_hidden" name="gc_id3">
	</div>
<!--	<div class="goods-api tabs-panel">-->
<!--		<label><i></i>--><?php //echo $lang['circle_goods_link_tips1'];if(C('taobao_api_isuse')){echo $lang['circle_goods_link_tips2'];}echo $lang['circle_goods_link_tips3'];?><!--</label>-->
<!--		<p>-->
<!--			<input type="text" id="goods_link" class="text w400" /> <a-->
<!--				href="javascript:void(0);" nctype="goodsLinkAdd">--><?php //echo $lang['nc_add'];?><!--</a>-->
<!--		</p>-->
<!--	</div>-->
	<div class="tabs-panel tabs-hide">
		<!-- 商品图片start -->
    <?php if (!empty($output['goods'])){?>
    <ul id="mycarousel1" class="jcarousel-skin-tango">
      <?php foreach ($output['goods'] as $v) {?>
      <li><a href="javascript:void(0);"
				data-param="{'id':'<?php echo $v['goods_id'];?>','name':'<?php echo $v['goods_name'];?>','price':'<?php echo $v['goods_price'];?>','storeid':'<?php echo $v['store_id'];?>','img':'<?php echo thumb($v, 60);?>','image':'<?php echo $v['goods_image'];?>','uri':'<?php echo urlShop('goods', 'index', array('goods_id'=>$v['goods_id']));?>','type':0}">
					<img title="<?php echo $v['goods_name']?>"
					src="<?php echo thumb($v, 240);?>" />
					<p class="extra"><?php echo $lang['circle_selected'];?></p>
			</a></li>
      <?php }?>
    </ul>
    <?php } else{?>
    <div class="norecord"><?php echo $lang['circle_bought_goods_null'];?></div>
    <?php }?>
  </div>
	<div class="refish"><b></b><a href="javascript:;" onclick="refreshgoods()">换一批商品</a></div>
	<div class="" nctype="cgError"></div>
	<dl class="selected-goods">
		<dt><?php echo $lang['circle_selected_goods'];?></dt>
	</dl>

	<div class="handle-bar">
		<a href="Javascript: void(0)" class="button" onclick="inserGoods()">添加商品</a>
	</div>
</div>
<script
	src="<?php echo RESOURCE_SITE_URL;?>/js/jcarousel/jquery.jcarousel.min.js"></script>
<script>
var insertAllowedCount = 10;		// 允许插入商品数量
$(function(){
    
	//帖子列表隔行变色
	$(".group-theme-list li:odd").css("background-color","#F8F9FA");
	$(".group-theme-list li:even").css("background-color","#FCFCFC");

	//侧边栏tab切换
	$(".tabs-nav > li > a").click(function(e) {
		var tabs = $(this).parent().parent().children("li");
		var panels = $(this).parent().parent().parent().children(".tabs-panel");
		var index = $.inArray(this, $(this).parent().parent().find("a"));
		tabs.removeClass("tabs-selected")
			.eq(index).addClass("tabs-selected");
		panels.addClass("tabs-hide")
			.eq(index).removeClass("tabs-hide");
		if(index != 0){
			//图片轮换
			$('#mycarousel'+index).unbind().jcarousel({visible: 4,itemFallbackDimension: 300});
		}
	}); 

	// 选项商品事件触发
	$('.tabs-panel').find('li > a').click(function(){
		chooseGoods(this);
	});


	// According to the product link to add goods
	$('a[nctype="goodsLinkAdd"]').click(function(){

		// Validation choose goods quantity
		var count = insertAllowedCount - $('.selected-goods > dd').length;
		if(count <= 0){
			// 这里怎么加提示？ 不能在继续选择商品
			$('div[nctype="cgError"]').html('<span><?php echo $lang['circle_goods_error1'];?></span>');
    		window.setTimeout(hideError,5000);	// 5 seconds after the hidden message
			return false;
		}
		
		var link = encodeURIComponent($('#goods_link').val());
		var _uri = CIRCLE_SITE_URL+'/index.php?act=theme&op=check_link&link='+link+'&c_id='+c_id;
		$.getJSON(_uri, function(data){
			if (data){
				$('<dd data-param="{\'id\':\''+data.id+'\',\'name\':\''+data.title+'\',\'price\':\''+data.price+'\',\'storeid\':\''+data.storeid+'\',\'image\':\''+data.img+'\',\'img\':\''+data.image+'\',\'uri\':\''+data.url+'\',\'type\':\''+data.type+'\'}"><em></em><p><img src="'+data.image+'" /></p></dd>')
					.appendTo('.selected-goods').click( function(){ $(this).remove(); });
				return;
            }else{
        		// 这里怎么加提示？ 不能在继续选择商品
        		$('div[nctype="cgError"]').html('<span><?php echo $lang['circle_goods_error2'];?></span>');
        		window.setTimeout(hideError,5000);	// 5 seconds after the hidden message
        		return;
            }
		});
	});

});
// 选择商品js
function chooseGoods(o){
	// 验证选择商品数量
	var count = insertAllowedCount - $('.selected-goods > dd').length;
	if(count <= 0){
		// 这里怎么加提示？ 不能在继续选择商品
		$('div[nctype="cgError"]').html('<?php echo $lang['circle_goods_error1'];?>');
		return false;
	}
		var str = o.getAttribute('data-param');
	var data_str;
	eval("data_str = " + str);
	$('<dd data-param="'+str+'"><em></em><p><img src="'+data_str.img+'" /></p></dd>').appendTo('.selected-goods')
		.click(function(){
			$(this).remove();
			o.removeClass('selected').click(function(){
				chooseGoods($(this));
			});
		});
	o.addClass('selected').unbind();

}

// 插入商品
function inserGoods(){
	 var selectedgoods = document.getElementsByClassName('selected-goods')[0].getElementsByTagName('dd');
	 var selectGoods_id = ''
	 for (var i=0;i<selectedgoods.length;i++){
		 data_param = selectedgoods[i].getAttribute('data-param');
		 var data_str;
		 eval("data_str = " + data_param);
		 selectGoods_id+=data_str.id+"|";
	 }
	var url = "/index.php?act=store_goods_select&op=save_goods&selectIds="+selectGoods_id;
	$.ajax({
		 type:"GET",
		 url:url,
		 dataType:"text",
		 success:function(data){
			  if(data==1){
                    window.location.reload();
			  }
		 }
	})
}

/**
 * 刷新商品
 * */
function refreshgoods(){
	 var gc_hidden = document.getElementsByClassName('gc_hidden');
	 var paran = "";
	 if (gc_hidden[0].value!=""){
		   paran+='&gc_id='+gc_hidden[0].value;
	 }
	if (gc_hidden[1].value!=""){
		paran+='&gc_id1='+gc_hidden[1].value;
	}
	if (gc_hidden[2].value!=''){
		 paran+="&gc_id2="+gc_hidden[2].value;
	}
	url = "<?php echo CIRCLE_SITE_URL ?>/index.php?act=theme&c_id=1&op=choosegoods&ajax_get_goods=1&"+paran;
	$.ajax({
		type:"GET",
		url:url,
		dataType:"json",
		success:function(data){
			toFillContent(data);
		}
	})


}

/**
 * 根据ID获取类别
 * @param id  父类id
 * @param Lev 分类级别
 */
function getClass(obj,id,Lev){

	 url = "<?php echo CIRCLE_SITE_URL ?>/index.php?act=theme&c_id=1&op=getClass&gc_parentid="+id;
	 var gc_hidden = document.getElementsByClassName('gc_hidden')[Lev-1];
	 spanwhow = obj.parentNode.parentNode.getElementsByTagName('span')[0];
	 spanwhow.innerHTML = obj.innerHTML+"<b></b>";
	 gc_hidden.value = id;
	 if(Lev==3){
		   if(!document.getElementById('sou')) {
			   var search = document.createElement('div');
			   search.id = 'sou';
			   search.innerHTML = "搜索";
			   search.setAttribute('onclick','refreshgoods()');
			   $('.select—box')[0].appendChild(search);
		   }
			return;
	 }
	$.ajax({
			type:"GET",
			url:url,
			dataType:"json",
			success:function(data){
				  if(data){
						toFillHtml(data,Lev,name);
				  }
			}
	})
}

function toFillContent(d){
	var content = '';
	for (var i=0;i< d.length;i++){
	    content += '<li><a href="javascript:void(0);" onclick="chooseGoods(this)" data-param="{\'id\':\''+d[i]['goods_id']+'\',\'name\':\''+d[i]['goods_name']+'\',\'price\':\''+d[i]['goods_price']+'\',\'storeid\':\''+d[i]['store_id']+'\',\'image\':\''+d[i]['goods_image']+'\',\'img\':\''+d[i]['imageUrl']+'\',\'uri\':\'<?php echo urlShop("goods","index");?>&goods_id='+d[i]['goods_id']+'\',\'type\':\''+d[i]['type']+'\'}"><img title='+d[i]['goods_name']+' src="'+d[i]['imageUrl']+'" /><p class="extra">已选择</p></a></li>';
	}
	$('#mycarousel1').html(content);
}

/**
 *
 * @param data
 * @param id
 */
function toFillHtml(data,lev,name){
      var box = document.getElementsByClassName('select_name')[lev];
	  if(box==undefined){
		  var select_name = document.createElement('div');
		  select_name.className = "select_name";
		  select_name.innerHTML = "<span>选择分类 <b></b></span>";
		  $('.select—box')[0].appendChild(select_name);
		  var box = document.getElementsByClassName('select_name')[lev];
		  lev++;
	  }else{
		  var boxUl = box.getElementsByTagName('ul')[0];
	  }
	  var html = '';
	  if (boxUl==undefined) {
		  var html = "<ul>";
		  for (var i = 0; i < data.length; i++) {
			  html += "<li onclick='getClass(this," + data[i]['gc_id'] + ","+lev+")'>" + data[i]['gc_name'] + "</li>";
		  }
		  html += "</ul>";
		  box.innerHTML += html;
	  }else{
		  for (var i = 0; i < data.length; i++) {
			  html += "<li onclick='getClass(this," + data[i]['gc_id'] + ","+lev+")'>" + data[i]['gc_name'] + "</li>";
		  }
		  boxUl.innerHTML = html;
	  }

}

// Hide the error message
function hideError(){
	$('div[nctype="cgError"]').hide("slow", function(){
		$(this).html('').show();
	});
}
</script>